<template>
  <div class="preview">
    <div class="top">
      <div class="repay_amount" v-if="data.restRepay">
        <p class="desc">{{ $t('repayableAmount') }}</p>
        <p v-if="payintype==='EXTENSION'" class="amount" >
          <span class="amount-unit">₱</span>
          <span class="amount-text">{{ extensionamount | formatCurrency(',') }}</span>
        </p>
        <p v-else class="amount">
          <span class="amount-unit">₱</span>
          <span class="amount-text">{{ repayAmount | formatCurrency(',') }}</span>
          <i @click="toggleNumQuestion"  class="num-question"></i>
        </p>
        <!--还款金额-->
      </div>
    </div>

    <div class="content-wrapper border-top-icon" v-if="type && type!=='Xendit' && repayType !== 'QR'">
      <div v-if="type && type!=='Xendit' && repayType !== 'QR'" class="repay_type">
        <div class="Biller"><span class="label">Biller</span><span class="value">{{ $t('contractNumber') }}</span></div><!--contract number-->
        <div v-if="type==='SKY'"><span class="label">SkyPay</span><span class="value van-ellipsis">{{ repayCode || data.contractNumber }}</span><a @click="copy" href="javascript:void(0);" class="btn_copy">Copy</a></div>
        <div v-if="type==='MSP'"><span class="label">MySuperPay</span><span class="value van-ellipsis">{{ repayCode || data.contractNumber }}</span><a @click="copy" href="javascript:void(0);" class="btn_copy">Copy</a></div>
        <div v-if="type==='PAYSO'&&repayCode!=''"><span class="label">Payso</span><span class="value van-ellipsis">{{ repayCode }}</span><a @click="copy" href="javascript:void(0);" class="btn_copy">Copy</a></div>
      </div>

      <!--
      <div v-if="(couponList.length || couponInfo.useStatus==='2')&&payintype!='EXTENSION'" class="coupon_list">
        <div @click="handleShowCouponList" class="sort">
          <div>Repayment coupon</div>
          <div v-if="couponInfo.useStatus==='2'">PHP {{ couponInfo.discountAmount | formatCurrency(',') }}</div>
          <div v-else class="select_arrow">Select <span class="arrow_right"></span></div>
        </div>
      </div>
       -->
      <div v-if="isVisibleDetails && false" class="content">
        <div class="sort">
          <div>{{ $t('loanTime') }}</div><!--借款时间-->
          <div>{{ data.loanTime | formatDate('MM-dd-yyyy') }}</div>
        </div>
        <div class="sort">
          <div>{{ $t('loanAmount') }}</div><!--借款金额-->
          <div>₱ {{ data.contractAmount + '' | formatCurrency(',') }}</div>
        </div>
        <div class="sort">
          <div>{{ $t('LoanTerm') }}</div><!--借款期限-->
          <div>{{ data.loanPeriod }} {{ $t('day') }}</div>
        </div>
        <div class="sort">
          <div>{{ $t('getAmount') }}</div><!--到手金额-->
          <div>₱ {{ data.loanAmount + '' | formatCurrency(',') }}</div>
        </div>
        <div class="sort">
          <div @click="toggleQuestion" class="icon-question">{{ $t('totalFee') }}</div><!--扣款金额-->
          <div>₱ {{ data.headInterest }}</div>
          <div v-if="isVisibleQuestion" class="question-modal">
            <i></i>
            <div v-if="data.deductType === 2 || data.deductType === 3">
              <span>{{ $t('rate') }}：</span><!--利息-->
              <span>₱ {{ data.interest }}11</span>
            </div>
            <div v-if="data.deductType === 1 || data.deductType === 3">
              <span>{{ $t('accountManageFee') }}：</span><!--账户管理费-->
              <span>₱ {{ data.accountServiceFee }}22</span>
            </div>
            <div v-if="data.deductType === 1 || data.deductType === 3">
              <span>{{ $t('platformFee') }}：</span><!--平台服务费-->
              <span>₱ {{ data.platformServiceFee }}333</span>
            </div>
            <div v-if="data.deductType === 1 || data.deductType === 3">
              <span>{{ $t('riskFee') }}：</span><!--风险管理费-->
              <span>₱ {{ data.riskServiceFee }}444</span>
            </div>
            <div v-if="data.deductType === 1 || data.deductType === 3">
              <span>{{ $t('creditFee') }}：</span><!--征信查询费-->
              <span>₱ {{ data.creditServiceFee }}55555</span>
            </div>
          </div>
        </div>
        <div class="sort">
          <div>{{ $t('repayableAmount') }}</div><!--还款金额-->
          <div>₱ {{ repayAmount | formatCurrency(',') }}</div>
        </div>
        <div class="sort">
          <div>{{ $t('lastRepayDay') }}</div><!--最后还款日-->
          <div>{{ data.repayTime | formatDate('MM-dd-yyyy') }}</div>
        </div>
        <div v-if="data.isOverdue === 'true'" class="sort">
          <div>{{ $t('overdueFee') }}</div><!--逾期滞纳金-->
          <div>₱ {{ data.lateFee || 0 }}</div>
        </div>
        <div v-if="data.isOverdue === 'true'" class="sort">
          <div>{{ $t('overduePenalty') }}</div><!--逾期罚息-->
          <div>₱ {{ data.lateCharge || 0 }}</div>
        </div>
        <div v-if="data.isOverdue === 'true'" class="sort">
          <div>{{ $t('overdueDays') }}</div><!--逾期天数-->
          <div>{{ data.lateDays || 0 }} {{ $t('day') }}</div>
        </div>
      </div>

      <div v-if="payintype!=='EXTENSION' && false" @click="toggleDetails" :class="{'toggle': true,'opening': isVisibleDetails}"><span v-if="!isVisibleDetails">{{ $t('expand') }}</span><span v-else>{{ $t('collapse') }}</span> {{$t('details') }}<i></i></div>
    </div>

    <div v-if="isVisibleQuestion" @click="toggleQuestion" class="mask"></div>

    <div v-if="isVisibleDetails" class="bottom"></div>

    <!--  费用明细  -->
    <div v-if="isVisibleNumQuestion" @click.self="toggleNumQuestion" class="modal_repay_amount_detail mask">
      <div class="question-modal">
        <div>
          <span>{{ $t('loanAmount') }}：</span><!--合同金额-->
          <span>PHP {{ data.contractAmount }}</span>
        </div>
        <div v-if="couponInfo&&couponInfo.useStatus === '2'">
          <span>Repayment coupon：</span><!--优惠券-->
          <span>PHP {{ couponInfo.discountAmount }}</span>
        </div>
        <div v-if="data.deductType === 1">
          <span>{{ $t('rate') }}：</span><!--利息-->
          <span>PHP {{ data.interest }}</span>
        </div>
        <div v-if="data.deductType === 2">
          <span>{{ $t('accountManageFee') }}：</span><!--账户管理费-->
          <span>PHP {{ data.accountServiceFee }}</span>
        </div>
        <div v-if="data.deductType === 2">
          <span>{{ $t('platformFee') }}：</span><!--平台服务费-->
          <span>PHP {{ data.platformServiceFee }}</span>
        </div>
        <div v-if="data.deductType === 2">
          <span>{{ $t('riskFee') }}：</span><!--风险管理费-->
          <span>PHP {{ data.riskServiceFee }}</span>
        </div>
        <div v-if="data.deductType === 2">
          <span>{{ $t('creditFee') }}：</span><!--征信查询费-->
          <span>PHP {{ data.creditServiceFee }}</span>
        </div>
        <div v-if="data.isOverdue === 'true'">
          <span>{{ $t('overdueFee') }}：</span><!--逾期滞纳金-->
          <span>PHP {{ data.lateFee }}</span>
        </div>
        <div v-if="data.isOverdue === 'true'">
          <span>{{ $t('overduePenalty') }}：</span><!--逾期罚息-->
          <span>PHP {{ data.lateCharge }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script src="./main.js"></script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
